 <include file="public:header"/>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<script src="layui/layui.js"></script>
 <style type="text/css">
 	.zyint{
 		overflow: hidden;
 		margin-top: 60px;
 		margin-left: 150px;
 	}
 	.innerboxes{
 		width:100%;
 		overflow: hidden;
 	}
 	.zyboxes{
 		width:600px;
 		margin: 60px auto 100px;
 		overflow: hidden;
 	}
 	.zyleft{
 		float: left;
 	}
 	.zyleft img{
 		display: block;
 		width: 100px;
 		height: 100px;
 	}
 	.zyright{
 		width: 450px;
 		float: right;
 		overflow: hidden;
 	}
 	.zyright p{
 		width:96%;
 		font-size: 16px;
 		line-height: 27px;
 	}
 	.zyright p:first-child{
 		font-size: 35px;
 		letter-spacing: 3px;
 		color: #00c1de;
 		font-weight: bold;
 		line-height: 40px;
 	}
 	.wind-product-footer{
 		width: 100%;
 		overflow: hidden;
 		margin-top: 10px;
 	}
 	.wind-product-footer span{
 		cursor: pointer;
 	}
 	.wind-product-footer span:first-child{
 		display: inline-block;
 		width: 121px;
 		text-align: center;
 		height: 35px;
 		line-height: 35px;
 		color: #fff;
 		background: #00c1de;
 		font-size: 16px;
 	}
 	.wind-product-footer span:nth-child(2){
 		display: inline-block;
 		width: 100px;
 		text-align: center;
 		height: 35px;
 		line-height: 35px;
 		margin-left: 20px;
	    background-color: #ebecec;
	    color: #373d41;
 	}
 	html,body,.righttanc{
 		width: 100%;
 		height: 100%;
 	}
 	.righttanc{
 		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		background: rgba(0,0,0,.4);
 		z-index: 10000;
 		display: none;
 	}
 	.tancCon{
 		width: 500px;
 		height: 100%;
 		background: #fff;
 		position: fixed;
 		right:0;
 		top: 0;
 	}
 	.contet{
 		width: 100%;
 		height: 100%;
 		padding-bottom: 20px;
 		overflow-y: auto;
 		overflow-x: hidden;
 		position: relative;
 	}
 	.contet::-webkit-scrollbar {
        display: none;
    }
 	.tanctop{
 		width: 100%;
 		height: 50px;
 		line-height: 50px;
 		position: relative;
 		border-bottom: 1px solid #ccc;
 	}
 	.tanctop span{
 		font-size: 16px;
 		display: inline-block;
 		margin-left: 10px;
 	}
 	.tanctop i{
 		position: absolute;
 		right: 10px;
 		top: 18px;
 		font-size: 18px;
 	}
 	.tancnext{
 		width: 100%;
 		overflow: hidden;
 	}
 	.tancnext h2{
 		width: 100%;
 		padding-left: 20px;
 		font-size: 16px;
 		line-height: 40px;
 		font-weight: bold;
 	}
 	.tancnext p{
 		padding-left: 80px;
 		line-height: 30px;
 	}
 	.forminfo{
 		width: 100%;
 		margin-top: 10px;
 	}
 	.forminfo p{
 		padding-left: 80px;
 	}
 	.redciror{
 		display: inline-block;
 		width: 6px;
 		height: 6px;
 		background: #ff7770;
 		border-radius: 100%;
 		-webkit-border-radius: 100%;
 		-ms-border-radius: 100%;
 		-o-border-radius: 100%;
 	}
 	.forminfo p span{
 		display: inline-block;
 		height: 30px;
 		line-height: 30px;
 		margin: 0 4px;
 		font-weight: bold;
 	}
 	.problem{
 		display: inline-block;
 		width: 20px;
 		text-align: center;
 		height: 20px;
 		line-height: 20px;
 		background: #ccc;
 		color: #fff;
 		border-radius: 100%;
 		-webkit-border-radius: 100%;
 		-ms-border-radius: 100%;
 		-o-border-radius: 100%;
 	}
 	.contentboxes{
 		width: 100%;
 		height: 100%;
 		position: relative; 
 	}
 	.intxt{
 		width:300px;
 		padding: 3px;
 		overflow: hidden;
 		line-height: 30px;
 		border: 1px solid #ccc;
 		position: relative;
 		margin-left: 80px;
 		margin-top: 5px;
 	}
 	.intxt input{
 		border: none !important;
 		outline: none;
 	}
 	.intxt span{
 		position: absolute;
 		right: 3px;
 		top: 4px;
 	}
 	.down{
 		position: absolute;
 		right: 4px;
 		top: 10px;
 		font-size: 16px;
 	}
 	.listui{
 		position: absolute;
 		top: 37px;
 		left: 0;
 		width: 100%;
 		box-shadow: 0 3px 10px #ccc;
 		background: #fff;
 		border: 1px solid #ccc;
 		display: none;
 		z-index: 10000;
 	}
 	.listui li{
 		width: 100%;
 		overflow: hidden;
 		border-bottom: 1px solid #ccc;
 		cursor: pointer;
 	}
 	.listui li:last-child{
 		border-bottom: none;
 	}
 	.listui li p{
 		width: 100%;
 		height: 30px;
 		line-height: 30px;
 		overflow: hidden;
 	}
 	.listui li p i{
 		font-size: 16px;
 		color: #00c1de;
 		display: none;
 		margin-left: -16px;
 	}
 	.listui li:first-child p i{
 		display: inline-block;
 	}
 	.listtxt{
 		width: 300px;
 		margin-left: 80px;
 		position: relative;
 	}
 	.directp{
 		color: orange;
 		margin: 10px 0 10px 0;
 	}
 	.txtarea{
 		width: 100%;
 		height: 80px;
 		border: 1px solid #ccc;
 		padding: 2px;
 	}
 	.ziyuan,.ziyuan li p{
 		width: 100%;
 		overflow: hidden; 
 	}
 	.ziyuan li{
 		margin: 10px;
 		float: left;
 		overflow: hidden;
 	}
 	.ziyuan li p span,.ziyuan li p i{
 		color: #35b34a;
 		font-size: 13px;
 	}
 	.targetinternet{
 		width: 386px;
 		margin-left: 80px;
 	}
 	.targetinternet span{
 		display: inline-block;
 		margin:4px;
 		width: 43px;
 		position: relative;
 	}
 	.targetinternet span input{
 		display: inline-block;
 		width: 100%;
 		text-align: center;
 		background: #fff;
 	}
 	.targetinternet strong{
 		display: inline-block;
 		margin:4px;
 		width: 5px;
 		text-align: center;
 		font-weight: bold;
 		font-size: 18px;
 		height: 20px;
 		line-height: 20px;
 		vertical-align: middle;
 	}
 	.xuline{
 		width: 100%;
 		border-top: 1px dashed #ccc;
 	}
 	.adDelect{
 		width: 50%;
 		float: right;
 	}
 	.adDelect span{
 		display: inline-block;
 		margin: 6px 10px;
 		cursor: pointer;
 	}
 	.jiaolistbox{
 		margin-bottom: 90px;
 	}
 	.queren{
 		width: 500px;
 		height: 60px;
 		background: #fff;
 		position: fixed;
 		bottom: 0;
 		right:0;
 		border-top: 1px solid #f5f5f5;
 		box-shadow: 0 -2px 30px #f5f5f5;
 	}
 	.qrbtn{
 		width: 200px;
 		float: right;
 	}
 	.qrbtn span{
 		cursor: pointer;
 	}
 	.qrbtn span:first-child{
 		display: inline-block;
 		width: 60px;
 		text-align: center;
 		height: 32px;
 		line-height: 32px;
 		background: #00c1de;
 		color: #fff;
 		margin-top: 12px;
 		margin-right: 10px;
 	}
 	.qrbtn span:nth-child(2){
 		display: inline-block;
 		width: 60px;
 		text-align: center;
 		height: 32px;
 		line-height: 32px;
 		background: #ccc;
 		color: #fff;
 	}
 </style>
	<div class="zyint">
		<div class="innerboxes">
			<div class="zyboxes">
				<div class="zyleft">
					<img src="images/TB1ACignC_I8KJjy0FoXXaFnVXa-164-164.png">
				</div>
				<div class="zyright">
					<p>专有网络</p>
					<p>专有网络VPC（Virtual Private Cloud）是用户基于阿里云创建的自定义私有网络, 不同的专有网络之间二层逻辑隔离，用户可以在自己创建的专有网络内创建和管理云产品实例，比如ECS、负载均衡、RDS等。</p>
					<div class="wind-product-footer">
						<span onclick="rightboxshow()">创建专有网络</span>
						<span>刷新</span>
					</div>
				</div>
			</div>

		</div>
		<!-- 右边的弹窗 -->
		<div class="righttanc">
			<div class="contentboxes">
				<div class="tancCon">
					<div class="contet">
						<div class="tanctop">
							<span>创建专有网络</span>
							<i onclick="rightboxhide(this)" class="fa fa-times"></i>
						</div>
						<div class="tancnext">
							<h2>专有网络</h2>
							<p>地域</p>
							<p>华北 1</p>
						</div>
						<div class="forminfo">
							<p>
								<i class="redciror"></i>
								<span>名称</span>
								<i class="problem">?</i>
							</p>
							<div class="intxt">
								<input type="text" name="">
								<span>0/128</span>
							</div>
						</div>
						<div class="forminfo">
							<p>
								<i class="redciror"></i>
								<span>目标网段</span>
								<i class="problem">?</i>
							</p>
							<div class="listtxt" onclick="boxesshow(this)">
								<div class="intxt" style="margin-left: 0;">
									<input type="text" name="" class="yuming" value="192.168.0.0/16">
									<i class="fa fa-angle-down down"></i>
								</div>
								<ul class="listui">
									<li onclick="insertval1(this)">
										<p><i class="fa fa-check"></i><span>192.168.0.0/16</span></p>
									</li>
									<li onclick="insertval1(this)">
										<p><i class="fa fa-check"></i><span>192.168.0.0/120</span></p>
									</li>
									<li onclick="insertval1(this)">
										<p><i class="fa fa-check"></i><span>192.168.0.0/22</span></p>
									</li>
								</ul>
							</div>
							<p class="directp"><i class=""></i>一旦创建成功，网段不能修改</p>
						</div>
						<div class="forminfo">
							<p>
								<i class="redciror"></i>
								<span>描述</span>
								<i class="problem">?</i>
							</p>
							<div class="intxt" style="border:none;">
								<textarea class="txtarea"></textarea>
								<span style="bottom: 10px;top: auto !important;right: 10px;">0/256</span>
							</div>
						</div>
						<div class="jiaolistbox">
							<div class="jiaolist">
								<div class="tancnext">
									<h2>交换机</h2>
								</div>
								<div class="forminfo">
									<p>
										<i class="redciror"></i>
										<span>名称</span>
										<i class="problem">?</i>
									</p>
									<div class="intxt">
										<input type="text" name="">
										<span>0/128</span>
									</div>
								</div>
								<div class="forminfo">
									<p>
										<i class="redciror"></i>
										<span>可用区</span>
										<i class="problem">?</i>
									</p>
									<div class="listtxt" onclick="boxesshow(this)">
										<div class="intxt" style="margin-left: 0;">
											<input type="text" name="" class="quyus" value="" placeholder="请选择区域">
											<i class="fa fa-angle-down down"></i>
										</div>
										<ul class="listui">
											<li onclick="insertval3(this)">
												<p><i class="fa fa-check"></i><span>华北 1 可用区 B</span></p>
											</li>
											<li onclick="insertval3(this)">
												<p><i class="fa fa-check"></i><span>华北 1 可用区 C</span></p>
											</li>
										</ul>
									</div>
									<p class="directp"><i class=""></i>一旦创建成功，网段不能修改</p>
								</div>


								<div class="forminfo">
									<p>
										<i class="redciror"></i>
										<span>可用区资源</span>
										<i class="problem">?</i>
									</p>
									<ul class="ziyuan">
										<li>
											<p><span>ECS</span><i class="fa fa-check-circle"></i></p>
										</li>
										<li>
											<p><span>RDS</span><i class="fa fa-check-circle"></i></p>
										</li>
										<li>
											<p><span>SLB</span><i class="fa fa-check-circle"></i></p>
										</li>
									</ul>
								</div>

								<div class="forminfo">
									<p>
										<i class="redciror"></i>
										<span>目标网段</span>
										<i class="problem">?</i>
									</p>
									<div class="targetinternet">
										<span>
											<input type="number" value="192" disabled>
										</span>
										<strong>.</strong>
										<span>
											<input type="number" value="168" disabled>
										</span>
										<strong>.</strong>
										<span>
											<input type="text" onblur="blurs(this)" value="0">
										</span>
										<strong>.</strong>
										<span>
											<input type="number" value="0" disabled>
										</span>
										<strong>/</strong>
										<span onclick="boxesshow(this)">
											<input type="number" value="24" class="mubian" disabled>
											<i class="fa fa-angle-down down" style="top: 1px;"></i>
											<ul class="listui" style="top:18px;min-width: 90px;min-height: 40px;overflow-y: auto;max-height: 120px;">
												<li onclick="insertval2(this)">
													<p style="padding-left: 16px;"><i class="fa fa-check" style="display: inline-block;"></i><span>1</span></p>
												</li>
												<li onclick="insertval2(this)">
													<p style="padding-left: 16px;"><i class="fa fa-check" style="display: none;"></i><span>2</span></p>
												</li>
												<li onclick="insertval2(this)">
													<p style="padding-left: 16px;"><i class="fa fa-check" style="display: none;"></i><span>3</span></p>
												</li>
												<li onclick="insertval2(this)">
													<p style="padding-left: 16px;"><i class="fa fa-check" style="display: none;"></i><span>4</span></p>
												</li>
												<li onclick="insertval2(this)">
													<p style="padding-left: 16px;"><i class="fa fa-check" style="display: none;"></i><span>5</span></p>
												</li>
												<li onclick="insertval2(this)">
													<p style="padding-left: 16px;"><i class="fa fa-check" style="display: none;"></i><span>6</span></p>
												</li>
												<li onclick="insertval2(this)">
													<p style="padding-left: 16px;"><i class="fa fa-check" style="display: none;"></i><span>7</span></p>
												</li>
											</ul>
										</span>
									</div>
								</div>

								<div class="forminfo">
									<p>
										<i class="redciror"></i>
										<span>可用IP数</span>
									</p>
									<div class="intxt" style="border:none;">
										<p style="padding-left: 0;">256</p>
									</div>
								</div>

								<div class="forminfo">
									<p>
										<i class="redciror"></i>
										<span>描述</span>
										<i class="problem">?</i>
									</p>
									<div class="intxt" style="border:none;">
										<textarea class="txtarea"></textarea>
										<span style="bottom: 10px;top: auto !important;right: 10px;">0/256</span>
									</div>
								</div>
								<div class="xuline"></div>
								<div class="adDelect">
									<span onclick="tianjia(this)"><i class="fa fa-plus-square"></i> 添加</span>
									<span onclick="shanchu(this)"><i class="fa fa-trash"></i> 删除</span>
								</div>
							</div>
						</div>
						<!-- 底部提交按钮 -->
						<div class="queren">
							<div class="qrbtn">
								<span>确认</span>
								<span>取消</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function boxesshow(id){
			if($(id).find('.listui').css('display') == 'none'){
				$(id).find('.listui').show();
			}else{
				$(id).find('.listui').hide();
			}
		}
		function insertval1(id){
			$(id).find('i').show();
			$(id).siblings('li').find('i').hide();
			var vals = $(id).find('span').html();
			$(id).parent().siblings('div').find('input.yuming').val(vals);
		}
		function insertval3(id){
			$(id).find('i').show();
			$(id).siblings('li').find('i').hide();
			var vals = $(id).find('span').html();
			$(id).parent().siblings('div').find('input.quyus').val(vals);
		}
		function insertval2(id){
			$(id).find('i').show();
			$(id).siblings('li').find('i').hide();
			var vals = $(id).find('span').html();
			$(id).parent().siblings('input.mubian').val(vals);
		}
		function blurs(id){
			if($(id).val()<1){
				$(id).val(0);
			}
		}
		// 添加操作
		function tianjia(id){
			if($('.jiaolist').length >= 3){
				return;
			}else{
				var html = '<div class="jiaolist">';
					html += $(id).parent().parent().html();
					html += '</div>';
				$('.jiaolistbox').append(html);	
			}
		}
		// 删除操作
		function shanchu(id){
			$(id).parent().parent().remove();
		}

		// 点击右边的弹窗x 右边的弹窗隐藏
		function rightboxhide(id){
			$(id).parent().parent().parent().parent().parent().hide();
		}
		// 点击创建专有网络右边的弹窗出现
		function rightboxshow(){
			$('.righttanc').show();
		}
	</script>
 <include file="public:footer"/>